<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创业平台</title>
    <style>
        body {
            margin: 0;
        }
        header {
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        nav img {
            width: 100%;
            border-radius: 10px;
        }
        nav img:nth-of-type(2), nav img:nth-of-type(3) {
            display: none;
        }
        nav button{
            position: absolute;
            top: 120px;
            border-radius: 50%;
            border: none;
            color: white;
            background: #bbb;
            font-size: 20px;
        }
        nav button:nth-of-type(1) {
            left: 0;
        }
        nav button:nth-of-type(2) {
            right: 0;
        }
        #tab {
            border-bottom: 10px solid #eee;
        }
        #tab img, #list img {
            width: 100px;
            height: 100px;
        }
        #tab ul, #tabbar ul {
            display: flex;
            justify-content: space-around;
            text-align: center;
            list-style: none;
            padding: 0;
        }
        #tabbar ul li {
            flex: 1;
            padding: 10px;
        }
        #tabbar .active {
            color: #0099ff;
            border-bottom: 1px solid #0099ff;
        }
        #list .item {
            display: flex;
            justify-content: space-between;
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
        
    </style>
</head>
<body>
    <header>创业平台</header>
    <nav>
        <img src="imgs/banner1.png" alt="">
        <img src="imgs/banner2.png" alt="">
        <img src="imgs/banner3.png" alt="">
        <button onclick="back()"><</button>
        <button onclick="forward()">></button>
    </nav>
    <nav id="tab">
        <ul>
            <li>
                <img src="imgs/nav1.png" alt="导航图片">
                <p>团队帮扶</p>
            </li>
            <li>
                <img src="imgs/nav2.png" alt="导航图片">
                <p>创业加盟</p>
            </li>
            <li>
                <img src="imgs/nav3.png" alt="导航图片">
                <p>FOC中心</p>
            </li>
            <li>
                <img src="imgs/nav4.png" alt="导航图片">
                <p>购物中心</p>
            </li>
        </ul>
    </nav>
    <nav id="tabbar">
        <ul>
            <li class="active" data-index="1">平台时讯</li>
            <li data-index="2">创业经验</li>
            <li data-index="3">优质加盟</li>
        </ul>
    </nav>
    <div id="list">
        <div class="item">
            <div>
                <h3>热烈欢迎创商邦成立</h3>
                <p>2024-07-18 15:52:28</p>
            </div>
            <img src="imgs/nav1.png" alt="">
        </div>
        <div class="item">
            <div>
                <h3>热烈欢迎创商邦成立</h3>
                <p>2024-07-18 15:52:28</p>
            </div>
            <img src="imgs/nav1.png" alt="">
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        var data1 = [
            {
                id: 1,
                title: '再次热烈欢迎创商邦成立',
                time: '2020-07-18 15:52:28',
                img: 'nav1.png'
            },
            {
                id: 2,
                title: '再次热烈欢迎创商邦成立再次热烈欢迎创商邦成立',
                time: '2020-10-8 15:52:28',
                img: 'nav2.png'
            },
        ]
        var data2 = [
            {
                id: 3,
                title: '再次热烈欢迎创商邦成立333',
                time: '2020-07-18 15:52:28',
                img: 'nav1.png'
            }
        ]
        var data3 = [
            {
                id: 4,
                title: '再次热烈欢迎创商邦成立444',
                time: '2020-07-18 15:52:28',
                img: 'nav1.png'
            }
        ]

        document.querySelector('#tabbar ul').onclick = function (e) {
            //移除其他标签的class，给target加active
            for (const element of e.target.parentElement.children) {
                element.setAttribute('class','')
            }
            e.target.setAttribute('class','active')
           
            switch (e.target.dataset['index']-0) {
                case 1:
                    loaddata(data1)
                    break;
                case 2:
                    loaddata(data2)
                    break;
                case 3: 
                    loaddata(data3)
                    break;
                default:
                    break;
            }
        }

        //数据加载
        function loaddata(data) {
            var res = ''
            for (const item of data) {
                //找到DOM节点，传数据
                res  += 
                `<div class="item">
                    <div>
                        <h3>${item.title}</h3>
                        <p>${item.time}</p>
                    </div>
                    <img src="./imgs/${item.img}" alt="">
                </div>`
            }
            var list = document.querySelector("#list")
            list.innerHTML = res
        }

        loaddata(data1)

        //轮播图
        var index = 0
        setInterval(function () {
            move(1)
        }, 3000)
        function move(dir) {
            // dir=1,前；0-后
            // console.log(index);
            //隐藏第一张
            var item_hide = document.querySelectorAll('nav img')[index]
            item_hide.style.display = 'none'
            //显示下一张
            if (dir) {
                index = ++ index > 2 ? 0 : index
            } else {
                index = -- index < 0 ? 2 : index 
            }
            var item_show = document.querySelectorAll('nav img')[index]
            item_show.style.display = 'inline-block'
        }
        function back() {
            //TODO: 清除定时器
            move(0)
        }
        function forward() {
            move(1)
        }
    </script>
</body>
</html>